<template>
  <div class="app-container">
    <!-- <div class="remark">
      <div>1.生产班次：①焊装24线(白)其中17:00-20:00机动生产23线;②焊装24线(晚)；③涂装21线(白)；④总装22线(白)。</div>
      <div>2.CKD：焊装24线晚班生产60套CKD；</div>
      <div>3.其它：无；</div>
    </div> -->
    <h3>车间监控</h3>
    <el-row style="margin-bottom: 10px;">
      <!-- 焊装 BS_MATERIAL_NO -->
      <el-col :span="8">
        <!--  v-for="(item, i) in factoryData.slice(3 * (index - 1), 3 * index)" :key="item.id" -->
        <!-- <div class="card-body">
          <div></div>
        </div>
        <div class="arrow"></div> -->
        <el-row>
          <el-col class="card-body" :span="20">
            <el-row class="workshop-title">{{factoryData[0].name}}</el-row>
            <div class="main-card">
              <el-row>
                <el-row class="line-title">{{factoryData[0].lineList[0].name}}</el-row>
                <el-row class="line-title">
                  <div>
                    <span>JPH:</span>
                    <span class="num">-/-</span>
                    <span>HPV:</span>
                    <span class="num">-/-</span>
                    <span>月HPV:</span>
                    <span class="num">-/-</span>
                  </div>
                  <!-- <el-col :span="6" class="top-col">
                    <span>JPH：</span>
                    <span>24/0</span>
                  </el-col>
                  <el-col :span="6" class="top-col">
                    <span>HPV：</span>
                    <span>0/0</span>
                  </el-col>
                  <el-col :span="6" class="top-col">
                    <span>月HPV：</span>
                    <span>6.67/11.28</span>
                  </el-col> -->
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 0)">{{betweenList[0]}}</el-col>
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 0)">
                    <div class="circle-div">
                      <div>{{throughList[0]}}</div>
                      <div>{{factoryData[0].lineList[0].workshopName1}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 1)">{{betweenList[1]}}</el-col>
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 1)">
                    <div class="circle-div">
                      <div>{{throughList[1]}}</div>
                      <div>{{factoryData[0].lineList[0].workshopName2}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 2)">{{betweenList[2]}}</el-col>
                </el-row>
                <el-row></el-row>
              </el-row>
            </div>
          </el-col>
          <el-col :span="4" style="background-image:url('arrow.png')">
            <img class="arrow-img" src="@/assets/effct-monitor/arrow.png" alt="">
          </el-col>
        </el-row>
      </el-col>
      <!-- 涂装 PS_MATERIAL_NO -->
      <el-col :span="8">
        <el-row>
          <el-col class="card-body" :span="20">
            <el-row class="workshop-title">{{factoryData[1].name}}</el-row>
            <div class="main-card">
              <el-row>
                <el-row class="line-title">{{factoryData[1].lineList[0].name}}</el-row>
                <el-row class="line-title">
                  <div>
                    <span>JPH:</span>
                    <span class="num">-/-</span>
                    <span>HPV:</span>
                    <span class="num">-/-</span>
                    <span>月HPV:</span>
                    <span class="num">-/-</span>
                  </div>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 2)">
                    <div class="circle-div">
                      <div>{{throughList[2]}}</div>
                      <div>{{factoryData[1].lineList[0].workshopName1}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 3)">{{betweenList[3]}}</el-col>
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 3)">
                    <div class="circle-div">
                      <div>{{throughList[3]}}</div>
                      <div>{{factoryData[1].lineList[0].workshopName2}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 4)">{{betweenList[4]}}</el-col>
                </el-row>
                <el-row></el-row>
              </el-row>
            </div>
          </el-col>
          <el-col :span="4" style="background-image:url('arrow.png')">
            <img class="arrow-img" src="@/assets/effct-monitor/arrow.png" alt="">
          </el-col>
        </el-row>
      </el-col>
      <!-- 总装 MATERIAL_NO -->
      <el-col :span="8">
        <el-row>
          <el-col class="card-body" :span="20">
            <el-row class="workshop-title">{{factoryData[2].name}}</el-row>
            <div class="main-card">
              <el-row>
                <el-row class="line-title">{{factoryData[2].lineList[0].name}}</el-row>
                <el-row class="line-title">
                  <div>
                    <span>JPH:</span>
                    <span class="num">-/-</span>
                    <span>HPV:</span>
                    <span class="num">-/-</span>
                    <span>月HPV:</span>
                    <span class="num">-/-</span>
                  </div>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 4)">
                    <div class="circle-div">
                      <div>{{throughList[4]}}</div>
                      <div>{{factoryData[2].lineList[0].workshopName1}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 5)">{{betweenList[5]}}</el-col>
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 5)">
                    <div class="circle-div">
                      <div>{{throughList[5]}}</div>
                      <div>{{factoryData[2].lineList[0].workshopName2}}</div>
                    </div>
                  </el-col>
                  <el-col class="bottom-col" @click.native="showDetailDialog('between', 'MATERIAL_NO', 6)">{{betweenList[6]}}</el-col>
                  <el-col class="bottom-col bottom-circle" @click.native="showDetailDialog('thru', 'MATERIAL_NO', 6)">
                    <div class="circle-div">
                      <div>{{throughList[6]}}</div>
                      <div>{{factoryData[2].lineList[0].workshopName3}}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row></el-row>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="整车物料号汇总" :visible.sync="dialogTableVisible">
      <el-row style="text-align:right;">
        <el-button type="primary" icon="el-icon-download" @click="handleExport">
          导出
        </el-button>
      </el-row>
      <el-table :data="detailData" v-loading="listLoading">
        <el-table-column property="material" label="整车物料号"></el-table-column>
        <el-table-column property="type" label="车型"></el-table-column>
        <el-table-column property="count" label="数量"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  $font_size_base: 12px;
  .remark {
    width: 420px;
    line-height: 15px;
    margin: 3px;
    margin-left: 400px;
    padding: 2px;
    border: 1px solid #A3C0E8;
    font-size: $font_size_base;
  }
  .card-body {
    border: 1px solid #A3C0E8;
    .workshop-title {
      height: 30px;
      line-height: 30px;
      background-color: #E2F0FF;
      font-size: 14px;
      border-bottom: 1px solid #A3C0E8;
    }
    .main-card {
      // padding: 3px;
      box-sizing: border-box;
      font-size: $font_size_base;
      .line-title {
        background-color: #FDF5E6;
        text-align: center;
        span {
          display: inline-block;
        }
        span.num {
          margin-right: 10px;
        }
      }
      .el-row{
        padding: 5px;
        text-align: center;
      }
      .flex-col {
        padding: 10px;
      }
      .bottom-col {
        width: 10%;
        text-align: center;
      }
      .bottom-circle {
        width: 25%;
        .circle-div {
          width: 80px;
          height: 80px;
          margin: 0 auto;
          border-radius: 50%;
          background-color: #70dd70;
          text-align: center;
          padding-top: 30px;
        }
      }
    }
  }
  .arrow-img {
    width: 70%;
    margin-top: 80px;
  }
  
  
</style>
<script>
import { fetchFactoryData, fetchVinData, fetchMaterialData } from '@/api/bdc/line-monitor-table'
import underscore from 'underscore'

export default {
  name: 'LineMonitorTable',
  data() {
    return {
      // 监控基础数据
      factoryData: [],
      // 监控实时数量
      throughList: [],
      betweenList: [],
      // 定时器
      set: null,
      // 模态窗数据
      dialogTableVisible: false,
      detailData: [],
      listLoading: false,
    }
  },
  created() {
    clearInterval(this.set)
    this.getVinData()
    this.set = setInterval(() => this.getVinData(), 30 * 1000)
    // 工厂基础数据
    this.factoryData = [
      {
        id: 'HZ11',
        name: '焊装1车间',
        lineList: [
          {
            id: 10,
            name: '焊装1车间1线',
            jph: 0,
            theoryJph: 0,
            hpv: 0,
            theoryHpv: 0,
            monthHpv: 6.67,
            theoryMonthHpv: 11.28,
            workshopName1: '焊装10点',
            workshopName2: '焊装20点'
          }
        ]
      },
      {
        id: 'TZ11',
        name: '涂装1车间',
        lineList: [
          {
            id: 20,
            name: '涂装1车间1线',
            jph: 0,
            theoryJph: 0,
            hpv: 0,
            theoryHpv: 0,
            monthHpv: 6.67,
            theoryMonthHpv: 11.28,
            workshopName1: '涂装10点',
            workshopName2: '涂装20点'
          }
        ]
      },
      {
        id: 'ZZ11',
        name: '总装1车间',
        lineList: [
          {
            id: 30,
            name: '总装1车间1线',
            jph: 0,
            theoryJph: 0,
            hpv: 0,
            theoryHpv: 0,
            monthHpv: 6.67,
            theoryMonthHpv: 11.28,
            workshopName1: '总装10点',
            workshopName2: '总装20点',
            workshopName3: '总装30点'
          }
        ]
      }
    ]
  },
  destroyed() {
    clearInterval(this.set)
  },
  methods: {
    // 获取工厂配置数据
    getfactoryData() {
      fetchFactoryData().then(res => {
        console.log('res', res)
      })
    },
    // 获取vin数量
    getVinData() {
      fetchVinData().then(res => {
        this.throughList = res.data.thru
        this.betweenList = res.data.between
      })
    },
    // 点击显示模态窗并获取物料号数据
    showDetailDialog(type, column, index) {
      this.dialogTableVisible = true
      this.detailData = []
      this.listLoading = true
      fetchMaterialData(type, column, index).then(res => {
        this.listLoading = false
        this.detailData = res.data
      })
    },
    // 导出
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const header = ['整车物料号', '车型', '数量']
        const keys = ['material', 'type', 'count']
        const data = this.formatList(this.detailData, keys).map(v => underscore.values(v))
        excel.export_json_to_excel({
          header,
          filename: '整车物料号汇总' + new Date().valueOf(),
          data
        })
        this.downloadLoading = false
      })
        
    },
    formatList(list, keys) {
      const newList = []
      for (const i of list) {
        const item = {}
        for (const j of keys) {
          // if (j === 'saleType') {
          //   item[j] = saleTypeList.find(a => a.codeValue === i[j]).name
          //   continue
          // }
          // if (j === 'proType') {
          //   item[j] = proTypeList.find(a => a.codeValue === i[j]).name
          //   continue
          // }
          item[j] = i[j]
        }
        newList.push(item)
      }
      return newList
    }
  }
}
</script>